<template>
  <div class="edit">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>订单详情</span>
        <el-button @click="$router.go(-1)" style="float: right; padding: 3px 0" type="text">返回</el-button>
      </div>

      <div class="deatil">
        <div class="info">
          <div class="item">
            <span>订单编号</span>
            <span>{{info.orderNum}}</span>
            <el-tag
              :type="info.orderStatus === 2?'success':'info'"
            >{{info.orderStatus | filterOrderStatus}}</el-tag>
          </div>
          <div class="item">
            <span>下单时间</span>
            <span>{{info.createTime}}</span>
          </div>
          <div class="item">
            <span>产品名称</span>
            <span>{{info.goodsName}}</span>
          </div>

          <div class="item">
            <span>规格</span>
            <span>{{info.goodsStandard.desc}}</span>
          </div>

          <div class="item">
            <span>商品数量</span>
            <span>{{info.goodsNum}}</span>
          </div>
          <div class="item">
            <span>支付金额</span>
            <span>{{info.orderMoney}}</span>
          </div>
          <div class="item">
            <span>订单类型</span>
            <el-tag
              :type="info.orderType === 3?'danger':'primary'"
            >{{info.orderType | filterOrderType}}</el-tag>
          </div>
          <div class="item">
            <span>下单用户</span>
            <el-image
              class="image"
              fit="cover"
              :src="info.user.avatar"
              :preview-src-list="[info.user.avatar]"
            ></el-image>
            <span>{{info.user.phonenumber}}</span>
            <span style="margin-left:20px;">{{info.user.nickName}}</span>
            <span>{{info.user.userType | filterUserType}}</span>
          </div>
        </div>
      </div>

      <el-table v-if="info.orderType == 3" :data="orderList">
        <el-table-column label="订单编号" align="center" prop="orderNum" :show-overflow-tooltip="true" />
        <el-table-column label="时间" align="center" prop="createTime" :show-overflow-tooltip="true" />
        <el-table-column
          label="商品名称"
          align="center"
          prop="goodsName"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="规格" align="center" prop="goodsStandard">
          <template slot-scope="scope">
            <span>{{scope.row.goodsStandard.desc}}</span>
          </template>
        </el-table-column>

        <el-table-column label="数量" align="center" prop="goodsNum" />
        <el-table-column label="金额" align="center" prop="orderMoney" />
        <el-table-column label="订单类型" align="center" prop="orderType">
          <template slot-scope="scope">
            <span>{{scope.row.orderType | filterOrderType}}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单状态" align="center" prop="orderStatus">
          <template slot-scope="scope">
            <span>{{scope.row.orderStatus | filterOrderStatus}}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户手机号" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.user.phonenumber}}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户昵称" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.user.nickName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户类别" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.user.userType | filterUserType}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="180"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleViewOrder(scope.row)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import { getOrder, getGroupList } from "@/api/system/order";
export default {
  name: "OrderDetail",
  data() {
    return {
      tab: "1",
      info: {
        user: {},
        goodsStandard: {}
      },
      orderList: [],
      devicesList: [],
      schoolGradesList: [],
      gradesList: [],
      money: {
        list: [],
        type: 1
      }
    };
  },
  filters: {
    filterUserType(value) {
      return {
        1: "普通用户",
        2: "推广员"
      }[value];
    },

    filterOrderType(value) {
      return {
        1: "正常",
        2: "限时抢购",
        3: "拼团",
        4: "兑换",
      }[value];
    },
    filterOrderStatus(value) {
      return {
        1: "待支付",
        2: "已支付",
        3: "已关闭"
      }[value];
    },
    filterGradeStatus(value) {
      return {
        1: "未完成",
        2: "已完成"
      }[value];
    },
    filterFeedBackType(value) {
      return {
        1: "顾问咨询",
        2: "意见反馈"
      }[value];
    }
  },
  mounted() {
    const id = this.$route.query.id;
    this.getEditInfo(id);
  },
  methods: {
    getEditInfo(id) {
      if (id) {
        getOrder(id).then(response => {
          this.info = response.data;
          this.info.goodsStandard = JSON.parse(this.info.goodsStandard);
          if (this.info.orderType == 3) {
            this.getList(id);
          }
        });
      }
    },
    getList(id) {
      getGroupList({
        mainOrder: id
      }).then(res => {
        this.orderList = res.data
          ? res.data.map(item => {
              item.goodsStandard = JSON.parse(item.goodsStandard);
              return item;
            })
          : [];
      });
    },
    handleViewOrder(item) {
      this.$router.replace({
        name: "OrderDetail",
        query: {
          id: item.id
        }
      });
    }
  },
  beforeRouteUpdate(to, from, next) {
    this.getEditInfo(to.query.id);
    next();
  }
};
</script>
<style lang="scss" scoped>
.item {
  font-size: 14px;
  padding: 18px 0;
  span:last-child {
    margin-left: 20px;
  }
  span:first-child {
    width: 100px;
    display: inline-block;
    text-align: right;
    margin-right: 20px;
    display: inline-block;
  }
  .image {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 20px;
    vertical-align: middle;
  }
}
.deatil {
  display: flex;
  .avatar {
    width: 140px;
    height: 140px;
    margin-right: 20px;
    .img {
      height: 100%;
    }
    /deep/ img {
      border-radius: 50%;
    }
  }
  .info {
    flex: 1;
  }
}
.tab-title {
  display: flex;
  justify-content: center;
  margin: 0 0 20px;
}
.tab-money {
  display: flex;
  .item {
    width: 200px;
    text-align: center;
    span {
      font-size: 14px;
      font-weight: bold;
    }
    h2 {
      font-size: 20px;
      color: #1890ff;
    }
  }
}
.grades {
  margin: 20px 0;
  span:first-child {
    display: inline-block;
    margin-right: 20px;
  }
}
</style>
